<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<!-- saved from url=(0019)http://guajibao.me/ -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>不关机的云端电脑</title>
    <link rel="icon" type="image/x-icon" mce_href="/favicon.ico" href="image/favicon.ico">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-docs.min.css">
    <!--[if lt IE 8]>
    <link rel="stylesheet" href="css/bootstrap-ie7.css">
    <![endif]-->

    <link rel="stylesheet" href="bootstrap/plugin/bootstrap3-dialog/css/bootstrap-dialog.min.css
    "/>
    <link rel="stylesheet" href="bootstrap/plugin/bootstrap3-dialog/css/bootstrap-dialog.min.css
    "/>
    <link rel="stylesheet" href="bootstrap/plugin/datetimepicker/css/bootstrap-datetimepicker.min.css"/>
    <script src="js/jquery.min.js"></script>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

    <![endif]-->
    <script src="js/bootstrap.js" type="text/javascript"></script>
    <script type="text/javascript"
            src="bootstrap/plugin/bootstrap3-dialog/js/bootstrap-dialog.min.js"></script>

    <script type="text/javascript" src="bootstrap/plugin/jquery-dataTables/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="bootstrap/plugin/jquery-dataTables/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="bootstrap/plugin/jquery-dataTables/dataTables.tableTools.js"></script>

    <script type="text/javascript" src="bootstrap/plugin/jquery-dataTables/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" src="bootstrap/plugin/bootstrap-waitingfor/bootstrap-waitingfor.js"></script>
    <script type="text/javascript" src="bootstrap/plugin/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="bootstrap/plugin/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript" src="js/date.js"></script>
    <script type="text/javascript" src="js/excellentexport.min.js"></script>
    <script type="text/javascript" src="js/jquery.fileDownload.js"></script>
    <style type="text/css">
        .modal-body {
            max-height: calc(100vh - 232px);
            overflow-y: auto;
        }

    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#example').DataTable({
                "bPaginate": false
            });

//            $('#incomeTable').DataTable( {
//                dom: 'T<"clear">lfrtip',
//                "bPaginate": false,
//                "oTableTools": {
//                    "aButtons": [
//                        {
//                            'sExtends':'csv',
//                            "sFileName": "filetitle.csv",
//                            'mColumns':[0,1]
//                        },
//                        {
//                            'sExtends':'pdf',
//                            "sFileName": "filetitle.pdf",
//                            'mColumns':[0,1]
//                        },
//                    ]
//                },
//            } );
//
//            $('#totalIncomeTable').DataTable( {
//                dom: 'T<"clear">lfrtip'
//            } );

            $("#incomeTable").find("tr:gt(0)").remove();
            $("#totalIncomeTable").find("tr:gt(0)").remove();


            var incomeFrom = document.getElementById("incomeFrom");
            incomeFrom.noValidate = true;

            /**
             *续费
             */
            $("#incomeFrom").submit(function (event) {


                event.preventDefault();
                event.stopPropagation();

                $("#downloadReport").hide();

                waitingDialog.show('数据准备中,请稍后...', {dialogSize: 'sm', progressType: 'wanring'});

//                $("#incomeTable").empty();
//                $("#totalIncomeTable").empty();

                $("#incomeTable").find("tr:gt(0)").remove();
                $("#totalIncomeTable").find("tr:gt(0)").remove();

                var url = "/findIncome"; // the script where you handle the form input.
                $.ajax({
                    type: "POST",
                    url: url,
                    data: $("#incomeFrom").serialize(),
                    success: function (data) {


                        waitingDialog.hide();

                        if(data && data.vpsBuyRecords){
                            $("#downloadReport").show();
                        }

                        var vpsBuyRecords = data.vpsBuyRecords;
                        var incomeTotalVoList = data.incomeTotalVoList;

//                        var dateString =  new Date(buyRecord.createTime).format("yyyy年mm月dd日 HH时MM分ss秒");

                        for (var idx = 0; idx < vpsBuyRecords.length; idx++) {
                            var buyRecord = vpsBuyRecords[idx];
                            var tr =
                                    "<tr role=\"row\" class=\"odd\">\n" +
//                                    "                                <td class=\"sorting_1\">" + buyRecord.customer.nickname + "</td>\n" +
                                    "                                <td>" + buyRecord.vps.vmName + "</td>\n" +
                                    "                                <td>" + buyRecord.rmb + "</td>\n" +
                                    "                                <td>" + new Date(buyRecord.createTime).format("yyyy年mm月dd日 HH时MM分ss秒") + "</td>\n" +
                                    "                                <td>" + buyRecord.operatorCode + "</td>\n" +
                                    "                                <td>" + buyRecord.seller.nickname + "</td>\n" +
                                    "\n" +
                                    "                            </tr>";
                            $('#incomeTable').append(tr);
                        }

                        for (var idx = 0; idx < incomeTotalVoList.length; idx++) {
                            var incomeTotalVo = incomeTotalVoList[idx];
                            var tr = "<tr role=\"row\">\n" +
                                    "                                <td>" + incomeTotalVo.nickname + "</td>\n" +
                                    "                                <td>" + incomeTotalVo.rmb + "</td>\n" +
                                    "                            </tr>";
                            $('#totalIncomeTable').append(tr);
                        }


                    }
                });

                return false; // avoid to execute the actual submit of the form.
            });

        });



        var tableToExcel = (function () {
            var uri = 'data:application/vnd.ms-excel;base64,'
                    , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
                    , base64 = function (s) {
                        return window.btoa(unescape(encodeURIComponent(s)))
                    }
                    , format = function (s, c) {
                        return s.replace(/{(\w+)}/g, function (m, p) {
                            return c[p];
                        })
                    }
            return function (table, name, filename) {
                if (!table.nodeType) table = document.getElementById(table)
                var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}

                document.getElementById("dlink").href = uri + base64(format(template, ctx));
                document.getElementById("dlink").download = filename;
                document.getElementById("dlink").click();

            }
        })()


    </script>
    <script type="text/javascript">
        var showInCome = function (hostId, hostIp) {

            var now = new Date();
            var firstDay = new Date(now.getFullYear(), now.getMonth(), 1);

            var nowString = now.format("yyyy年mm月dd日");
            var firstDayString = firstDay.format("yyyy年mm月dd日");

            $("#incomeTable").find("tr:gt(0)").remove();
            $("#totalIncomeTable").find("tr:gt(0)").remove();


            $("#startTime").val(firstDayString);

            $("#endTime").val(nowString);
            $("#hostId").val(hostId);
            $("#myModalLabel").text("["+hostIp+"]" +"流水查询");


            $('#myModal').modal('show');
        }
        function dismissDialog() {
            $('#myModal').modal('hide');
        }

        var downloadReport = function () {
            window.location.href="http://" +window.location.host + "/downloadReport?" + $("#incomeFrom").serialize();
        };

    </script>
</head>

<body data-spy="scroll" data-target="#myScrollspy">

<div>
    <nav class="navbar-l1 navbar-default navbar-static-top" role="navigation" style="background-color:#008eb7;"
         onmouseover="javascript:$('#navbar-brand').css('color','#fff');"
         onmouseout="javascript:$('#navbar-brand').css('color','#00a2ca');">
        <div class="container-fluid">
            <div class="navbar-header">
                <a id="navbar-brand" class="navbar-brand" style="" href="/">vpsb2c.com</a>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-navbar-collapse-1"><span class="sr-only">Toggle navigation</span><span
                        class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
            </div>
            <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a style="" href="/profile" title="当前用户：jiaoming42">您好，${loginedUser.nickname}</a></li>
                    <li></li>
                    <li></li>
                    <li><a style="" href="/logout" title="退出系统"><span
                            class="glyphicon glyphicon-log-out"></span>退出系统</a></li>

                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <nav class="navbar-l2 navbar-default navbar-static-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-navbar-collapse-2"><span class="sr-only">Toggle navigation</span><span
                        class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
            </div>
            <div class="collapse navbar-collapse" id="bs-navbar-collapse-2">
                <ul class="nav navbar-nav">
                    <c:choose>
                        <c:when test="${loginedUser.role == 0}">
                            <li class="active"><a style="padding-left:20px;padding-right:20px;" href="/">我的</a></li>
                        </c:when>
                        <c:otherwise>
                            <li><a style="padding-left:20px;padding-right:20px;" href="/">我的</a></li>
                            <%--<li><a style="padding-left:20px;padding-right:20px;"--%>
                            <%--href="/recordVps">VPS登记</a></li>--%>
                            <li><a style="padding-left:20px;padding-right:20px;" href="/userList">用户列表</a></li>
                            <li class="active"><a style="padding-left:20px;padding-right:20px;" href="/hostList">主机</a>
                            </li>
                            <%--<li><a style="padding-left:20px;padding-right:20px;" href="/income">流水</a></li>--%>
                            <c:if test="${loginedUser.role == 2}">
                                <li><a style="padding-left:20px;padding-right:20px;" href="/admin">设置管理员</a></li>
                            </c:if>
                        </c:otherwise>
                    </c:choose>


                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <div class="container-fluid">

        <div class="page-header">
            <h4>主机列表</h4>
        </div>
        <div id="example_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">

            <div class="row">
                <div class="col-sm-12">
                    <table id="example" class="table table-striped table-bordered dataTable" cellspacing="0"
                           width="100%" role="grid" aria-describedby="example_info" style="width: 100%;">
                        <thead>
                        <tr role="row">
                            <th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                aria-sort="ascending" aria-label="Name: activate to sort column descending"
                                style="width: 87px;">主机名
                            </th>
                            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                aria-label="Position: activate to sort column ascending" style="width: 141px;">主机ip地址
                            </th>
                            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                aria-label="Position: activate to sort column ascending" style="width: 141px;">备注
                            </th>
                            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                aria-label="Office: activate to sort column ascending" style="width: 62px;">注册时间
                            </th>
                            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                aria-label="Office: activate to sort column ascending" style="width: 62px;">vps数量
                            </th>

                            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                aria-label="Age: activate to sort column ascending" style="width: 25px;">操作
                            </th>

                        </tr>
                        </thead>

                        <tfoot>

                        </tfoot>

                        <tbody>
                        <c:forEach items="${serverHostList}" var="serverHost">

                            <tr role="row" class="odd">
                                <td class="sorting_1">${serverHost.hostname}</td>
                                <td>${serverHost.ip}</td>
                                <td>${serverHost.remark}</td>
                                <td>${serverHost.createTime}</td>
                                <td>${fn:length(serverHost.vpsSet)}</td>
                                <td>
                                    <a class="btn btn-primary" href="/getServerHost?serverHostId=${serverHost.id}">
                                        vps管理</a>
                                    <a class="btn btn-primary"
                                       href="javascript:showInCome('${serverHost.id}','${serverHost.ip}')">账单</a>

                                </td>


                            </tr>
                        </c:forEach>

                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="bootstrap-dialog-header">

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            onclick="dismissDialog()"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">192.168.1.122:8000流水查询功能</h4>
                    <br>

                    <div class="row">
                        <form id="incomeFrom">
                            <input type="hidden" id="hostId" name="hostId">

                            <div class="form-group">
                                <label class="col-sm-2 control-label text-right">开始时间</label>

                                <div class="col-sm-3">
                                    <input name="startTime" id="startTime" value="2015年10月10日" class="form-control"
                                           required>
                                </div>
                                <label class="col-sm-2 control-label text-right">结束时间</label>

                                <div class="col-sm-3">
                                    <input name="endTime" id="endTime" value="2015年10月10日" class="form-control"
                                           required>
                                </div>
                                <div class="col-sm-2">
                                    <button type="submit" class="btn btn-primary">开始查询</button>
                                </div>

                            </div>
                        </form>
                    </div>
                </div>

            </div>

            <div class="modal-body">
                <div class="row">

                    <div class="col-sm-9">
                        <table id="incomeTable" class="table table-striped table-bordered dataTable no-footer"
                               cellspacing="0" width="100%" role="grid" aria-describedby="example_info"
                               style="width: 100%;">
                            <thead>
                            <tr role="row">
                                <%--<th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1"--%>
                                    <%--aria-label="购买人--%>
                                <%--: activate to sort column descending" aria-sort="ascending">购买人--%>
                                <%--</th>--%>
                                <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                    aria-label="VPS
                                : activate to sort column ascending">VPS
                                </th>
                                <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                    aria-label="购买金额
                                : activate to sort column ascending">操作金额
                                </th>
                                <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                    aria-label="购买时间
                                : activate to sort column ascending">操作时间
                                </th>
                                <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                    aria-label="操作代码
                                : activate to sort column ascending">操作代码
                                </th>
                                <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                    aria-label="操作人
                                : activate to sort column ascending">操作人
                                </th>
                            </tr>
                            </thead>

                            <tfoot>

                            </tfoot>

                            <tbody>


                            <tr role="row" class="odd">
                                <td class="sorting_1">ROOT</td>
                                <td>WindownsXP</td>
                                <td>10.0</td>
                                <td>2015-10-08 16:07:14.0</td>
                                <td>租用</td>
                                <td>ROOT</td>

                            </tr>
                            <tr role="row" class="even">
                                <td class="sorting_1">ROOT</td>
                                <td>Win7</td>
                                <td>111.0</td>
                                <td>2015-10-08 16:13:01.0</td>
                                <td>租用</td>
                                <td>ROOT</td>

                            </tr>

                            </tbody>
                        </table>
                    </div>
                    <div class="col-sm-3">
                        <table id="totalIncomeTable" class="table table-striped table-bordered dataTable"
                               cellspacing="0"
                               width="100%" role="grid" aria-describedby="example_info" style="width: 100%;">
                            <thead>
                            <tr role="row">
                                <th>操作人
                                </th>
                                <th>金额
                                </th>

                            </tr>
                            </thead>

                            <tfoot>

                            </tfoot>

                            <tbody>

                            <tr role="row">
                                <td>Worker-Test-Server</td>
                                <td>114.104.160.112</td>
                            </tr>
                            <tr role="row" class="odd">
                                <td class="sorting_1">Worker-Test-Server</td>
                                <td>114.104.160.112</td>


                            </tr>
                            <tr role="row" class="odd">
                                <td class="sorting_1">Worker-Test-Server</td>
                                <td>114.104.160.112</td>


                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">

                <button id="downloadReport" style="display: none" class="btn btn-primary" onclick="downloadReport()">导出明细</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
